<template>
  <div v-if="data && activity" class="footer">
    <ul class="footer-ul">
      <li v-for="(key, val) in data['MA-SYX-25'].items" @click="gotopage(key)">
        <img :src="val.imgUrl" v-if="key != selectnum">
        <img :src="data['MA-SYX-24'].items[selectnum].imgUrl" v-else>
      </li>
    </ul>
  </div>
  <div v-else class="footer">
    <ul class="footer-ul">
      <li @click="gotopage(0)">
        <div>
          <img src="../../assets/icon_nav_button.png" v-if="0 == selectnum">
          <img src="../../assets/icon_nav_button.png" v-else>
          <span>首页</span>
        </div>
      </li>
      <li @click="gotopage(1)">
        <div>
          <img src="../../assets/icon_nav_msg.png" v-if="1 == selectnum">
          <img src="../../assets/icon_nav_msg.png" v-else>
          <span>消息</span>
        </div>
      </li>
      <li @click="gotopage(2)">
        <div>
          <img src="../../assets/icon_nav_article.png" v-if="2 == selectnum">
          <img src="../../assets/icon_nav_article.png" v-else>
          <span>发现</span>
        </div>
      </li>
      <li @click="gotopage(3)">
        <div>
          <img src="../../assets/icon_nav_cell.png" v-if="3 == selectnum">
          <img src="../../assets/icon_nav_cell.png" v-else>
          <span>我的</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<!--<template>-->
<!--<div>-->
<!--<tabbar class="tabbar" style="">-->
<!--<tabbar-item>-->
<!--<img slot="icon" src="../../assets/icon_nav_button.png">-->
<!--<span slot="label">首页</span>-->
<!--</tabbar-item>-->
<!--<tabbar-item show-dot>-->
<!--<img slot="icon" src="../../assets/icon_nav_msg.png">-->
<!--<span slot="label">消息</span>-->
<!--</tabbar-item>-->
<!--<tabbar-item selected link="/component/demo">-->
<!--<img slot="icon" src="../../assets/icon_nav_article.png">-->
<!--<span slot="label">目录</span>-->
<!--</tabbar-item>-->
<!--<tabbar-item badge="2">-->
<!--<img slot="icon" src="../../assets/icon_nav_cell.png">-->
<!--<span slot="label">消息</span>-->
<!--</tabbar-item>-->
<!--</tabbar>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--import { Tabbar, TabbarItem } from 'vux'-->
<!--export default {-->
<!--components: {-->
<!--Tabbar,-->
<!--TabbarItem-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<style lang="less" rel="stylesheet/less" scoped>-->


<!--</style>-->
<!--
  selectnum: 底部菜单栏位置
  import Bottomfooter from 'XXX/common/footer/Footer.vue'
  <bottomfooter :selectnum="'0'"></bottomfooter>
-->
<style lang="less" rel="stylesheet/less" scoped>
  @import "../../common/css/dsCommonForRem.less";
  .footer{
    position: fixed;
    width: 7.5rem;
    height: 1.3rem;
    background-color: #f9f9f9;
    border-top: 1px solid @sc8;
    bottom: 0;
    z-index: 2;
    text-align: center;
    .verticalcenter();
    .footer-ul {
      margin:0;padding:0;
      width: 7.5rem;
      margin: 0;
      /*margin: auto;*/
      list-style: none;
      &:after {
        content: '';
        display: block;
        clear: both;
      }
      span {
        position: relative;
        width: 1.86rem;
        height: 0.15rem;
        font-size: 0.25rem;
        border-radius: 50%;
      }
      &>li {
        float: left;
        width: 1.86rem;
        // width: 3.075rem;
        height: 1rem;

//        .verticalcenter();
        &>div {
          width: 1.2rem;
          margin: auto;
          img {
            display: block;
            width: 0.5rem;
            height: 0.5rem;
            margin: auto;
          }
          .footer-text {
            width: 1.5rem;
            text-align: center;
            line-height: 1;
          }
        }
      }
    }
  }
</style>

<script>
  export default {
    components: {},
    data () {
      return {
        hasNew: false,     // 是否有新文章
        activity: false,   // 是否有活动
        data: null         // 请求底部菜单数据
      }
    },
    methods: {
      // 跳转其他页面
      gotopage (key) {
        switch (Number(key)) {
          case 0:
            window.location.href = '/Home/home.html'
            break
          case 1:
            window.location.href = '/message/message.html'
            break
          case 2:
            window.location.href = '/find/article_list.html'
            break
          case 3:
            window.location.href = '/mine/user_center.html'
            break
          case 4:
            window.location.href = '/user_center/user_center.html'
            break
          default:
            break
        }
      },
      intNum (num) {
        return num < 10 ? '0' + num : num
      },
      getNew () {
        const dt = new Date()
        this.lastTime = dt.getFullYear() + this.intNum(dt.getMonth() + 1) + this.intNum(dt.getDate()) + this.intNum(dt.getHours()) + this.intNum(dt.getMinutes()) + this.intNum(dt.getSeconds())
        window.Http.get(
          window.API_DOMAIN + '/common-main-mapp/headlines-mapi/headlines/checknews/' + this.lastTime,
          {},
          { auth: false } // 关闭用户验证
        ).then((data) => {
          this.hasNew = data
        })
        setTimeout(() => {
          this.getNew()
        }, 30 * 60 * 1000)
      }
    },
    created () {
      if (this.activity) {
        window.Http.get(
          window.API_DOMAIN + '/common-main-mapp/newIndex-mapi/common/getAdvPositionInfoNew?cityName=广州市&isCache=1&channel=NCAR_WEIXIN&apCode=MA-SYX-24&apCode=MA-SYX-25',
          {},
          { auth: false } // 关闭用户验证
        ).then((data) => {
          if (window.gApi.MODE === 'DEV') {
            console.log('成功返回底部菜单栏', data)
          }
          this.data = data
        })
      }
      setTimeout(() => {
        this.getNew()
      }, 30 * 60 * 1000)
    },
    ready () {

    },
    props: ['selectnum']

  }
</script>







